<template>
	<view class="next-swiper-group">
		<view v-if="mode==='preview'" class="next-tabs-container">
			<next-tabs 
				:list="allDictTabsOptions"
				:current="curNow"
				keyName="label"
				lineWidth="0"
    		lineHeight="0"
				:activeStyle="{
					color: '#fff',
					fontWeight: '500',
					transform: 'scale(1.05)',
				}"
				:inactiveStyle="{
					color: '#666',
				}"
				@change="tabsChange"
				@itemClick="tabsClick"
			/>
		</view>
		<view :class="{preview: mode === 'preview'}">
			<next-swiper
				:list="fileList"
				:current="currentIndex"
				:keyName="dataListFileSrcKeyName"
				:showTitle="showTitle"
				:height="height"
				:autoplay="autoplay"
				:duration="duration"
				:loading="loading"
				:circular="false"
				:imgMode="imgMode"
				@change="swiperChange"
				@click="swiperClick"
			/>
		</view>
		<view 
			v-if="mode === 'common' && showTabsBar" 
			:style="{
				width: tabsBarWidth ? addUnit(tabsBarWidth) : undefined,
			}" 
			class="next-subsection-container">
			<next-subsection 
				mode="subsection" 
				:current="curNow" 
				@change="subsectionChange" 
				@itemClick="subsectionItemClick"
				:list="dictTitleList"
				:inactiveColor="'#fff'"
				:activeColor="'#000'"
				:fontSize="10"
				:bold="false"
			/>
		</view>
		<view v-if="mode === 'common' && showTabsBar && showPageSummary" class="next-pages-mark">
			<text decode>{{getDictSummary.currentNum}}/{{ getDictSummary.dictAllNum }}</text>
		</view>
		<next-preview-image 
			ref="nextPreviewImageRef" 
			:imgs="previewImgs"
			:showPageMarker="false"
			:opacity="1"
		/>
	</view>
</template>

<script>
	import props from './props.js';
	import NextSwiper from './plugen/next-swiper/next-swiper.vue';
	import NextSubsection from './plugen/next-subsection/next-subsection.vue';
	import NextTabs from './plugen/next-tabs/next-tabs.vue';
	import NextPreviewImage from './plugen/next-preview-image/next-preview-image.vue';
	import { addUnit } from '../../libs/function/index.js';
	import text from '../../libs/function/test.js';
	
	const defaultDictItem = {
		value: '$otherDict',
		title: '其他'
	}
	
	export default {
		name: 'next-swiper-group',
		mixins: [props],
		components: {
			NextSwiper,
			NextSubsection,
			NextTabs,
			NextPreviewImage
		},
		data: () => {
			return {
				curNow: 0,
				currentIndex: 0,
				previewImgs: []
			}
		},
		computed: {
			getDictSummary () {
				const currentItem = this.fileList[this.currentIndex]
				const currentDictkey = currentItem.$realDictKey
				const allNum = this.fileList.length
				const dictAllNum = this.fileList.filter(item => item.$realDictKey === currentDictkey).length
				let prelet = 0
				for(let i=0; i<this.curNow; i++) {
					const dictTitle = this.dictTitleList[i]
					const dictItem = this.allDictOptions.find(dictItem => dictItem.title === dictTitle)
					if (dictItem) {
						const len = this.fileList.filter(item => item.$realDictKey === dictItem.value).length
						prelet += len
					}
				}
				const currentNum = this.currentIndex - prelet + 1
				return {
					currentNum,
					dictAllNum
				}

			},
			fileList() {
				return (this.dataList || []).map(item => {
					const it = Object.assign({}, item)
					it.$realDictKey = it[this.dataListDictKeyName] && this.dictSortIndexObj.hasOwnProperty(it[this.dataListDictKeyName]) ? it[this.dataListDictKeyName] : defaultDictItem.value
					it.poster = it[this.dataListFilePosterKeyName] || ''
					return it
				}).sort((a, b) => {
					return this.dictSortIndexObj[a.$realDictKey] - this.dictSortIndexObj[b.$realDictKey]
				})
			},
			dictSortIndexObj() {
				const o = {};
				(this.dictOptions || []).filter(dictItem => {
					const dictKey = dictItem[this.dictKey]
					const bool = this.dataList.some(item => item[this.dataListDictKeyName] === dictKey)
					return bool
				}).map((dictItem, index) => {
					const dictKey = dictItem[this.dictKey]
					o[dictKey] = index
				});
				const dictOptionsKeys = this.dictOptions.map(it => it[this.dictKey])
				const isHaveOther = this.dataList.some(item => (dictOptionsKeys.indexOf(item[this.dataListDictKeyName]) === -1))
				if (isHaveOther) {
					let len = Object.keys(o).length
					o[defaultDictItem.value] = len
				}
				return o
			},
			dictTitleList() {
				return Object.keys(this.dictSortIndexObj).map(key => {
					const item = this.allDictOptions.find(item => item.value === key)
					if (item) {
						return item[this.dictTitle]
					} else {
						return ''
					}
				}).filter(name => name !== '')
			},
			allDictOptions() {
				return (this.dictOptions.map(dictItem => {
					return {	// 内部使用全部字典options 统一使用value 和 title
						value: dictItem[this.dictKey],
						title: dictItem[this.dictTitle]
					}
				}).concat([defaultDictItem]))
			},
			allDictTabsOptions() {
				return Object.keys(this.dictSortIndexObj).map(key => {
					let o = null
					const item = this.allDictOptions.find(item => item.value === key)
					if (item) {
						const dictAllNum = this.fileList.filter(it => it.$realDictKey === key).length
						o = {
							value: item.value,
							title: item.title,
							label: `${item.title}(${dictAllNum})`
						}
					}
					return o
				}).filter(item => !!item)
			}
		},
		methods: {
			addUnit,
			subsectionChange(index) {
				this.curNow = index
				const dictTitle = this.dictTitleList[index]
				const dictItem = this.allDictOptions.find(dictItem => dictItem.title === dictTitle)
				if (dictItem) {
					const idx = this.fileList.findIndex(item => item.$realDictKey === dictItem.value)
					this.currentIndex = idx
				}
				
			},
			swiperClick (index) {
				const item = this.fileList[index]
				if (this.ifPreviewImage) {
					const suf = text.getUrlSuf(item[this.dataListFileSrcKeyName])
					if (['jpg', 'jpeg', 'png', 'gif', 'tiff', 'svg', 'bmp', 'webp'].indexOf(suf) !== -1 || item.type === 'image') {
						this.previewImgs = [item[this.dataListFileSrcKeyName]]
						this.$refs.nextPreviewImageRef.open(0)
					}		
				}
				this.$emit('swiperItemClick', {...item, index})
			},
			subsectionItemClick (index) {
				const dictTitle = this.dictTitleList[index]
				const dictItem = this.allDictOptions.find(dictItem => dictItem.title === dictTitle)
				const item = dictItem || {}
				this.$emit('tabItemClick', {...item, index})
			},
			tabsClick (item) {
				this.$emit('tabItemClick', item)
			},
			swiperChange(item) {
				if (item) {
					this.currentIndex = item.current
					const currentItem = this.fileList[this.currentIndex]
					const currentDictkey = currentItem[this.dataListDictKeyName]
					if (currentDictkey && this.dictSortIndexObj.hasOwnProperty(currentDictkey)) {					
						this.curNow = this.dictSortIndexObj[currentDictkey]
					} else {
						this.curNow = this.dictSortIndexObj[defaultDictItem.value]
					}
					const resoureItem = this.dataList.find(item => item[this.dataListFileSrcKeyName] === currentItem[this.dataListFileSrcKeyName])
					if (resoureItem) {
						this.$emit('change', resoureItem)
					}
				}
			},
			tabsChange(it) {
				this.curNow = it.index
				const currentDictkey = it.value
				const dictItem = this.allDictOptions.find(dictItem => dictItem.title === currentDictkey)
				const idx = this.fileList.findIndex(item => item.$realDictKey === currentDictkey)
				this.currentIndex = idx
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/components.scss";
	
	.next-swiper-group {
		position: relative;
		.next-tabs-container {
			height: 40px;
			background-color: #000;
		}
		.preview {
			width: 100vw;
			height: calc(100vh - 40px);
			background-color: #000000;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.next-subsection-container {
			position: absolute;
			left: 20px;
			bottom: 25px;
		}
		.next-pages-mark {
			position: absolute;
			right: 20px;
			bottom: 25px;
			@include flex;
			font-size: 10px;
			font-weight: 500;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			background-color: rgba($color: #000000, $alpha: 0.5);
    		border-radius: 20px;
			color: #fff;
			padding: 3px 12px;
			box-sizing: border-box;
		}
	}
</style>
